import React, { Component } from 'react'
import { Modal, Form, Input, Upload, Button, Select, Switch } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'
import { validateFileRequire, getUploadProps } from '@js/tool'
import style from './Model.module.less'
import { download } from '@js/downloadRename'
const { Item } = Form
const { Option } = Select
export default class Model extends Component {
  state = {
    fileList: []
  }

  formRef=React.createRef()
  handleOk () {
    this.formRef.current.submit()
  }

  onFinish (d) {
    this.props.onFinish(d, this.onHide.bind(this))
  }

  onHide () {
    this.setState({
      fileList: []
    })
    this.formRef.current.resetFields()
    this.props.hide()
  }

  initData () {
    const c = this.formRef.current
    if (!c) {
      return setTimeout(() => {
        this.initData()
      }, 100)
    }
    const data = this.props.data || {}
    const keys = Object.keys(this.props.data)
    const d = {}
    keys.forEach(k => {
      d[k] = data[k] ? data[k] : undefined
    })
    d.user_define = d.user_define === 1
    c.setFieldsValue(d)
  }

  componentDidUpdate (prev) {
    if (!prev.visible && this.props.visible) {
      this.initData()
    }
  }

  componentDidMount () {
    this.initData()
  }

  renderDownload () {
    const d = this.props.data
    if (!d) {
      return null
    }
    const p = d.docx_path
    const t = d.title
    if (p && t) {
      return (
        <Item label='模板下载'>
          <a className={style.link} onClick={() => download(p, t)}>{t}</a>
        </Item>
      )
    }
  }

  render () {
    const { id } = this.props.data || {}
    const data = this.props.data || {}
    const isFileRequire = !data.id
    let title = id ? '修改文书' : '添加文书'
    if (this.props.justyModifyFile) {
      title = '更换模版文件'
    }
    return (
      <Modal
        title={title}
        open={this.props.visible}
        onOk={() => this.handleOk()}
        onCancel={() => this.onHide()}
        maskClosable={false}
      >
        <Form name='document-manage' labelCol={{ flex: '100px' }} ref={this.formRef} onFinish={d => this.onFinish(d)}>
          <Item noStyle name='id'><span /></Item>
          {this.renderDownload()}
          {!this.props.justyModifyFile ? (
            <>
              <Item name='user_define' label='是否呈批' valuePropName='checked'>
                <Switch checkedChildren='是' unCheckedChildren='否' />
              </Item>
              <Item name='title' label='文书名称' rules={[{ required: true, message: '文书名称不能为空' }]}>
                <Input placeholder='请输入文书名称' />
              </Item>
              <Item name='code_type' label='文书类型' rules={[{ required: true, message: '文书类型不能为空' }]}>
                <Select placeholder='请选择文书类型'>
                  {this.props.fileTypes.map(li => <Option key={li} value={li}>{li}</Option>)}
                </Select>
              </Item>
            </>
          ) : null}
          <Item name='file' label='文件' rules={[{ required: isFileRequire, message: '文件不能为空' }, validateFileRequire.bind(this, '文件不能为空')]}>
            <Upload {...getUploadProps.call(this, this.formRef, '.docx')}>
              <Button disabled={this.state.fileList.length !== 0}>
                <UploadOutlined /> 上传文件
              </Button>
            </Upload>
          </Item>
        </Form>
      </Modal>
    )
  }
}

Model.proptypes = {
  visible: PropTypes.bool,
  justyModifyFile: PropTypes.bool,
  hide: PropTypes.func,
  data: PropTypes.object,
  onFinish: PropTypes.func,
  fileTypes: PropTypes.array
}

Model.defaultProps = {
  visible: false,
  justyModifyFile: false,
  hide: () => {},
  data: {},
  onFinish: () => {},
  fileTypes: []
}
